import { AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, Directive, DoCheck, ElementRef, HostBinding, Input, OnChanges, OnInit, Renderer2, RendererStyleFlags2, SimpleChanges } from '@angular/core';

// 定义一个设置背景的指令。
@Directive({
  selector: '[appSetbackground]'
})
export class SetbackgroundDirective implements OnChanges, OnInit,  DoCheck, 
AfterContentInit, AfterContentChecked, AfterViewInit,AfterViewChecked {
  // @Input()
  // appSetbackground!: string;
  @Input('appSetbackground')
  background:{backColor:string,color:string}={backColor:'black',color:'white'};
 
  ngAfterViewChecked() {
    // this.changeBackgroundColor(this.appSetbackground);
    // this.changeBackgroundColor(this.background.backColor,this.background.color);
    console.log("appSetbackground-ngAfterViewContentChecked");
  }

  constructor(private element: ElementRef,private render:Renderer2) {

  }

  ngOnChanges(value: SimpleChanges) {
    console.log("appSetbackground-ngOnChanges");
    console.log(value);
  }

  ngOnInit(): void {
    console.log("appSetbackground-ngOnInit__OnlyOnce");

  }
  ngDoCheck(): void {
    console.log("appSetbackground-ngDoCheck");
  }


  ngAfterContentInit(): void {
    console.log("appSetbackground-ngAfterContentInit_OnlyOnce");


  }
  ngAfterContentChecked(): void {
    console.log("appSetbackground-ngAfterContentChecked");
  }


  ngAfterViewInit(): void {
    console.log("appSetbackground-ngAfterViewInit_OnlyOnce");


  }


  // private changeBackgroundColor(bgColor: string,fontColor: string) {
  //   // this.element.nativeElement.style.backgroundColor = color;
  //   this.render.setStyle(this.element.nativeElement,"backgroundColor",bgColor);
  //   this.render.setStyle(this.element.nativeElement,"color",fontColor);
  // }
  @HostBinding('style.backgroundColor')  get getBackGroundColor(){
    return this.background.backColor;
  }
  @HostBinding("style.color") get getFontColor(){
    return this.background.color;
  }

}
